<template>
  <Header/>
  <div class="main content box_center cf">
    <div class="channelWrap channelBanner cf">
      <div class="leftBox">
        <!-- 日期选择器 -->
        <div class="date-selector">
          <ul class="date-selector-list">
            <li
                v-for="(d, index) in footBallData"
                :key="index"
                :class="{ selected: tableDatas.dayTime === d.dayTime }"
                @click="selectDayMatchs(d.dayTime)"
            >
              <div class="date-wrapper">
                <div class="date-text">{{ d.dayShow }}<span
                    style="font-size:10px; font-weight: normal">[周{{ d.week }}]</span></div>
                <div v-if="d.matchCount > 0" class="hit-info">{{ d.selectCount }}中<span
                    v-if="today === d.day">?</span><span v-else>{{ d.shoot }}</span></div>
                <div v-else class="hit-info">无赛事</div>
              </div>
            </li>
          </ul>
          <!-- 复选框靠右显示 -->
          <label style="float: right; margin-right: 10px;">
            <input type="checkbox" v-model="onlySelect" @change="onOnlySelectChange"/>
            仅显示已选择的
          </label>
          <label style="float: right; margin-right: 10px;">
            <input type="checkbox" v-model="sortBy" @change="onSortByChange"/>
            按照排序位排序
          </label>
          <label style="float: right; margin-right: 10px;margin-bottom: 5px">
            <!--            <label-->
            <!--                style="font-weight:bold; color: red; margin-right: 10px;">最新数据时间：{{-->
            <!--                footBallData.lastUpdateTime-->
            <!--              }}</label>-->
            <el-date-picker
                v-model="queryTime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="选择赛事回查日期"
            />
            <el-button style="margin-bottom:10px;margin-left: 10px; " type="primary" @click="searchMatchByDay()">搜索
            </el-button>
          </label>
          <div class="league-select">
            <el-select
                v-model="selectedLeague"
                placeholder="请选择比赛类型"
                @change="onLeagueChange"
            >
              <el-option
                  v-for="item in leagueOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <table class="football-table">
          <thead>
          <tr>
            <th>编号</th>
            <th>赛事名称</th>
            <th>开赛时间</th>
            <th>截止投注</th>
            <th>主队</th>
            <th>(半场) 全场</th>
            <th>客队</th>
            <th>比分推荐</th>
            <th>进球推荐</th>
            <th>让球</th>
            <th>
              <div class="betbtn-grid">
                <div class="betbtn-row itm-rangB1">
                  <p class="betbtn" data-type="nspf"><span>胜</span></p>
                  <p class="betbtn" data-type="nspf"><span>平</span></p>
                  <p class="betbtn" data-type="nspf"><span>负</span></p>
                </div>
              </div>
            </th>
            <th>
              <div class="betbtn-grid">
                <div class="betbtn-row itm-rangB1">
                  <p class="betbtn" data-type="nspf"><span>胜赔差异</span></p>
                  <p class="betbtn" data-type="nspf"><span>平赔差异</span></p>
                  <p class="betbtn" data-type="nspf"><span>负赔差异</span></p>
                </div>
              </div>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in tableDatas.matchList" :key="item.id">
            <td><a :href="`${item.analysis}`" target="_blank">{{ item.number }}</a></td>
            <td>
              <a :style="{ backgroundColor: item.color, width: '70px', height: '24px', lineHeight: '24px', fontSize: '12px', color: '#fff', display: 'inline-block' }"
                 :href="`${item.matchUrl}`" target="_blank">{{ item.match }}</a>
            </td>
            <td>{{ item.openTime }}</td>
            <td>{{ item.deadline }}</td>
            <td class="td td-sort"><p class="itm-sort" title="信心排序"><span
                v-if="item.selectSort && Number(item.selectSort) > 0" class="ico-sort">
<!--              <i v-for="n in Number(item.selectSort)" :key="n" class="star">★</i>-->
              {{ item.selectSort }}
            </span></p>
              <a :href="`${item.homeTeamUrl}`" target="_blank" class="team-l"
                 :title="`${ item.homeTeam }`">{{ item.homeTeam }}</a></td>
            <td class="td td-team">
              <a class="score" :href="`https://odds.500.com/fenxi/shuju-${item.matchId}.shtml`"
                 target="_blank">{{ item.halfFullCourt }}</a>
            </td>
            <td><a :href="`${item.visitTeamUrl}`" target="_blank" class="team-r"
                   :title="`${item.visitingTeam}`">{{ item.visitingTeam }}</a></td>
            <td @dblclick="openSetScore(item)">
              <template v-if="item.teamScore">
                <div>【{{ item.scoreSelect }}】</div>
                <div>{{ item.teamScore }}</div>
                <div>进球差:{{ item.ballDiff }}</div>
                <div style="color: red; font-weight: bold" v-if="item.ouResult">--[{{ item.ouResult }}]--</div>
              </template>
              <template v-else>
                <el-icon color="#409efc" class="no-inherit" v-if="token">
                  <Edit/>
                </el-icon>
              </template>
            </td>

            <td>
              <div>{{ item.ballNum }}
                <div>【{{ item.ballNumPredict }}】</div>
              </div>
            </td>
            <!--            <td>{{ item.teamScore }}</td>-->
            <td class="td td-rang"><p class="" title="不让球"><span v-if="item.isSingle === '1'"
                                                                              class="ico-dg">单</span>0</p>
              <p class="green itm-rangA2"
                 :title="`${parseInt(item.letBall) > 0 ? '主队让' + Math.abs(parseInt(item.letBall)) + '球' : '主队受让' + Math.abs(parseInt(item.letBall)) + '球'}`">
                {{ item.letBall }}
              </p>
            </td>
            <td class="td td-betbtn">
              <div class="betbtn-grid">
                <div class="betbtn-row itm-rangB1">
                  <p @click="selectPay(item.matchId, 1)"
                     :class="`${item.winFlag === '1'?'betbtn win-pay':'betbtn'} ${item.winSelect === '1'?'cycle':''}`"
                     data-type="nspf" data-value="3"
                     :data-sp="`${item.winPay}`"><span>{{ item.winPay }}</span></p>
                  <p @click="selectPay(item.matchId, 2)"
                     :class="`${item.drawWinFlag === '1'?'betbtn win-pay':'betbtn'} ${item.drawWinSelect === '1'?'cycle':''}`"
                     data-type="nspf" data-value="1"
                     :data-sp="`${item.drawPay}`"><span>{{ item.drawPay }}</span></p>
                  <p @click="selectPay(item.matchId, 3)"
                     :class="`${item.visitWinFlag === '1'?'betbtn win-pay':'betbtn'} ${item.visitWinSelect === '1'?'cycle':''}`"
                     data-type="nspf" data-value="0"
                     :data-sp="`${item.visitPay}`"><span>{{ item.visitPay }}</span></p>
                </div>
                <div class="divider"></div> <!-- 分隔线 -->
                <div class="betbtn-row itm-rangB2">
                  <p @click="selectPay(item.matchId, 4)"
                     :class="`${item.letWinFlag === '1'?'betbtn win-pay':'betbtn'} ${item.letWinSelect === '1'?'cycle':''}`"
                     data-type="spf" data-value="3"
                     :data-sp="`${item.letWinPay}`"><span>{{ item.letWinPay }}</span></p>
                  <p @click="selectPay(item.matchId, 5)"
                     :class="`${item.letDrawWinFlag === '1'?'betbtn win-pay':'betbtn'} ${item.letDrawWinSelect === '1'?'cycle':''}`"
                     data-type="spf" data-value="1"
                     :data-sp="`${item.letDrawPay}`"><span>{{ item.letDrawPay }}</span></p>
                  <p @click="selectPay(item.matchId, 6)"
                     :class="`${item.letVisitWinFlag === '1'?'betbtn win-pay':'betbtn'} ${item.letVisitWinSelect === '1'?'cycle':''}`"
                     data-type="spf" data-value="0"
                     :data-sp="`${item.letVisitPay}`"><span>{{ item.letVisitPay }}</span></p>
                </div>
              </div>
            </td>
            <td class="td td-betbtn">
              <div class="betbtn-grid">
                <div class="betbtn-row itm-rangB1">
                  <p class="betbtn"><span>{{ item.winRate }}</span></p>
                  <p class="betbtn"><span>{{ item.drawWinRate }}</span></p>
                  <p class="betbtn"><span>{{ item.visitWinRate }}</span></p>
                </div>
                <div class="divider"></div> <!-- 分隔线 -->
                <div class="betbtn-row itm-rangB2">
                  <p class="betbtn"><span>{{ item.letWinRate }}</span></p>
                  <p class="betbtn"><span>{{ item.letDrawWinRate }}</span></p>
                  <p class="betbtn"><span>{{ item.letVisitWinRate }}</span></p>
                </div>
                <div class="divider"></div> <!-- 分隔线 -->
                <div class="betbtn-row itm-rangB2">
                  <p class="betbtn"><span>{{ item.minusWinRate }}</span></p>
                  <p class="betbtn"><span>{{ item.minusDrawWinRate }}</span></p>
                  <p class="betbtn"><span>{{ item.minusVisitWinRate }}</span></p>
                </div>
                <div class="divider"></div> <!-- 分隔线 -->
                <div class="betbtn-row itm-rangB2">
                  <p class="betbtn"><span>{{ item.ouHomeRate }}</span></p>
                  <p class="betbtn"><span>{{ item.ouDrawRate }}</span></p>
                  <p class="betbtn"><span>{{ item.ouVisitRate }}</span></p>
                </div>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <Footer/>


  <el-dialog v-model="dialogVisible" draggable>
    <template #title>
      <div class="dialog-title">
        {{ formScore.matchNo }} <span class="matchinfo">{{ formScore.home }}</span><span class="vs">vs</span><span
          class="matchinfo">{{ formScore.away }}</span> 比分预测录入
      </div>
    </template>
    <el-form :model="formScore" :inline="true" class="demo-form-inline">
      <el-divider content-position="center"><h1>半场比分</h1></el-divider>
      <el-form-item label="主队算法比分" :label-width="formLabelWidth">
        <el-input v-model="formScore.homeAlgScoreBan" autocomplete="off" placeholder="含小数点"/>
      </el-form-item>
      <el-form-item label="客队算法比分" :label-width="formLabelWidth">
        <el-input v-model="formScore.awayAlgScoreBan" autocomplete="off" placeholder="含小数点"/>
      </el-form-item>
      <el-form-item label="主队比分预测" :label-width="formLabelWidth">
        <el-input v-model="formScore.homePreScoreBan" autocomplete="off" placeholder="整数"/>
      </el-form-item>
      <el-form-item label="客队比分预测" :label-width="formLabelWidth">
        <el-input v-model="formScore.awayPreScoreBan" autocomplete="off" placeholder="整数"/>
      </el-form-item>
      <el-divider content-position="center"><h1>全场比分</h1></el-divider>
      <el-form-item label="主队算法比分" :label-width="formLabelWidth">
        <el-input v-model="formScore.homeAlgScoreQuan" autocomplete="off" placeholder="含小数点"/>
      </el-form-item>
      <el-form-item label="客队算法比分" :label-width="formLabelWidth">
        <el-input v-model="formScore.awayAlgScoreQuan" autocomplete="off" placeholder="含小数点"/>
      </el-form-item>
      <el-form-item label="主队比分预测" :label-width="formLabelWidth">
        <el-input v-model="formScore.homePreScoreQuan" autocomplete="off" placeholder="整数"/>
      </el-form-item>
      <el-form-item label="客队比分预测" :label-width="formLabelWidth">
        <el-input v-model="formScore.awayPreScoreQuan" autocomplete="off" placeholder="整数"/>
      </el-form-item>


      <el-divider content-position="center"><h1>胜平负概率</h1></el-divider>
      <el-form-item label="胜概率" :label-width="formLabelWidth">
        <el-input v-model="formScore.homeRate" autocomplete="off" placeholder="胜概率,如78.67"/>
      </el-form-item>
      <el-form-item label="平概率" :label-width="formLabelWidth">
        <el-input v-model="formScore.drawRate" autocomplete="off" placeholder="平概率,如21.33"/>
      </el-form-item>
      <el-form-item label="负概率" :label-width="formLabelWidth">
        <el-input v-model="formScore.awayRate" autocomplete="off" placeholder="负概率,如57.48"/>
      </el-form-item>
      <el-form-item label="顺序值" :label-width="formLabelWidth">
        <el-input v-model="formScore.selectSort" autocomplete="off" placeholder="顺序值"/>
      </el-form-item>


      <el-divider content-position="center"><h1>推荐理由</h1></el-divider>
      <!--      <el-input-->
      <!--          v-model="formScore.remark"-->
      <!--          style="width: 100%"-->
      <!--          :rows="4"-->
      <!--          type="textarea"-->
      <!--          placeholder="请输入推荐理由"-->
      <!--      />-->
      <div>
        <textarea v-model="formScore.remark" placeholder="输入 Markdown..." class="markdown-input"/>
        <div class="markdown-box">
          <div v-html="renderedMarkdown"></div>
        </div>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="saveScore()">保 存</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script>
import {reactive, toRefs, onMounted, ref, computed} from "vue";
import {ElMessage, ElLoading, ElMessageBox} from "element-plus";
import {Edit} from '@element-plus/icons-vue'
import Header from "@/components/common/Header";
import Footer from "@/components/common/Footer";
// import FriendLink from "@/components/home/FriendLink.vue";
import {getDayResults} from "@/api/sportteryFootball";
import {getNickName, getToken} from "@/utils/auth";
import {dayjs} from "element-plus";
import {dateFormat} from "@/utils";
// import {marked} from "marked";

export default {
  name: "home",
  components: {
    Header,
    Footer,
    // FriendLink,
    Edit,
  },
  setup() {
    const token = getToken();
    const dialogVisible = ref(false);
    const onlySelect = ref(false); // 默认未选中
    const sortBy = ref(false); // 默认未选中
    const formScore = reactive({
      homeAlgScoreBan: '',//主队算法比分半场
      homePreScoreBan: '',//主队预测比分半场
      awayAlgScoreBan: '',//客队算法比分半场
      awayPreScoreBan: '',//客队预测比分半场
      homeAlgScoreQuan: '',//主队算法比分全场
      homePreScoreQuan: '',//主队预测比分全场
      awayAlgScoreQuan: '',//客队算法比分全场
      awayPreScoreQuan: '',//客队预测比分全场
      homeRate: '',//胜概率
      drawRate: '',//平概率
      awayRate: '',//负概率
      remark: 'ee',
      selectSort: '99',
      matchId: '',
      home: '',
      away: '',
      matchNo: '',
      id: ''
    });

    const formLabelWidth = '140px'

    // 实时将 Markdown 转换为 HTML
    // const renderedMarkdown = computed(() => {
    //   if (!formScore.remark) return ''; // 如果为空，返回空字符串
    //   return marked(formScore.remark);
    // });

    // 选择比赛
    const selectDayMatchs = (dayTime) => {
      //本地查找到这一天的比赛数据
      state.tableDatas = state.footBallData.find(x => x.dayTime === dayTime);
    };

    const selectPay = async (fid, index) => {
      // 使用 Element Plus 的 MessageBox 进行确认
      ElMessageBox.confirm('确定要选择这个选项吗？', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        // 用户点击确认后执行以下操作
        const loading = ElLoading.service({text: '操作中...'}); // 加载动画
        try {
          const response = await footballSelect(fid, index);
          if (response.data) {
            //刷新列表
            await fetchFootBallList(state.selectedDate, onlySelect.value, sortBy.value);
          }
          ElMessage.success('选择' + (response.data ? "成功" : "失败"));
        } catch (error) {
          ElMessage.error('选择异常'); // 错误处理
        } finally {
          loading.close(); // 关闭加载动画
        }
      }).catch(() => {
        // 用户点击取消的处理
        ElMessage.info('操作已取消');
      });
    };

    // 定义复选框变更后的方法
    const onOnlySelectChange = () => {
    };

    const onSortByChange = () => {
    };

    //选择竞猜日期查询
    const searchMatchByDay = () => {
      fetchFootBallList(state.queryTime); // 发送请求获取数据
    }

    // 发送请求，根据选中的日期更新 footBallList
    const fetchFootBallList = async (day) => {
      const loading = ElLoading.service({text: 'Loading...'}); // 加载动画
      try {
        const query = {"pageSize": 10, "pageNo": 1, "startTime": day};
        const response = await getDayResults(query); // 等待 API 响应
        state.footBallData = response.data.data;
        state.tableDatas = state.footBallData[state.footBallData.length - 1];
      } catch (error) {
        ElMessage.error('获取数据失败'); // 错误处理
      } finally {
        loading.close(); // 关闭加载动画
      }
    };

    //打开输入比分数据
    const openSetScore = (m) => {
      dialogVisible.value = true;
      formScore.matchId = m.matchId;
      formScore.matchNo = m.number;
      formScore.home = m.homeTeam;
      formScore.away = m.visitingTeam;
      formScore.id = m.id;
      formScore.homeAlgScoreBan = m.homeAlgScoreBan;//主队算法比分半场
      formScore.homePreScoreBan = m.homePreScoreBan;//主队预测比分半场
      formScore.awayAlgScoreBan = m.awayAlgScoreBan;//客队算法比分半场
      formScore.awayPreScoreBan = m.awayPreScoreBan;//客队预测比分半场
      formScore.homeAlgScoreQuan = m.homeAlgScoreQuan;//主队算法比分全场
      formScore.homePreScoreQuan = m.homePreScoreQuan;//主队预测比分全场
      formScore.awayAlgScoreQuan = m.awayAlgScoreQuan;//客队算法比分全场
      formScore.awayPreScoreQuan = m.awayPreScoreQuan;//客队预测比分全场
      formScore.homeRate = m.ouHomeRate;//胜概率
      formScore.drawRate = m.ouDrawRate;//平概率
      formScore.awayRate = m.ouVisitRate;//负概率
      formScore.remark = m.remark;
      formScore.selectSort = m.selectSort;
      console.log("formScore===>:" + formScore);
      console.log("m===>:" + m);
    };
    //保存输入比分数据
    const saveScore = async () => {
      if (!/^\d+/.test(formScore.homeAlgScoreBan)) {
        ElMessage.error("格式不正确！");
        return;
      }
      if (!/^\d+/.test(formScore.homePreScoreBan)) {
        ElMessage.error("格式不正确！");
        return;
      }
      if (!/^\d+/.test(formScore.awayAlgScoreBan)) {
        ElMessage.error("格式不正确！");
        return;
      }
      if (!/^\d+/.test(formScore.awayPreScoreBan)) {
        ElMessage.error("格式不正确！");
        return;
      }
      if (!/^\d+/.test(formScore.homeAlgScoreQuan)) {
        ElMessage.error("格式不正确！");
        return;
      }
      if (!/^\d+/.test(formScore.homePreScoreQuan)) {
        ElMessage.error("格式不正确！");
        return;
      }
      if (!/^\d+/.test(formScore.awayAlgScoreQuan)) {
        ElMessage.error("格式不正确！");
        return;
      }
      if (!/^\d+/.test(formScore.awayPreScoreQuan)) {
        ElMessage.error("格式不正确！");
        return;
      }
      //提交到后台
      await putScore(formScore);
      dialogVisible.value = false;

    };

    // 初始化状态
    const state = reactive({
      imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL,
      footBallData: {},
      tableDatas: [],
      onlySelect: false,
      sortBy: false,
      selectedDate: '1', // 默认选中今天
      canMoveLeft: true, // 控制左箭头显示
      canMoveRight: false, // 控制右箭头显示
      queryTime: dateFormat("YYYY-MM-DD", new Date()), // 文本框搜索的日期
    });

    // 页面加载时调用 fetchFootBallList 并传入今天的日期
    onMounted(() => {
      fetchFootBallList();

    });

    return {
      ...toRefs(state),
      onlySelect,
      currentMatchId: null,
      selectPay,
      selectDayMatchs,
      onOnlySelectChange, // 暴露方法给模板使用
      onSortByChange, // 暴露方法给模板使用
      searchMatchByDay, // 按照日期搜索
      dialogVisible,
      formScore,
      formLabelWidth,
      openSetScore,
      saveScore,
      token,
      // renderedMarkdown
    };
  },
};
</script>

<style scoped>

.markdown-input {
  width: 100%;
  height: 100px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 16px;
}

.markdown-box {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.draggable {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.draggable img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.cycle {
  background-color: yellow !important; /* 示例背景色 */
  border: 1px solid #ddd; /* 选中时的边框 */
  color: #333;
}

.image-grid {
  grid-template-columns: repeat(3, 1fr); /* 3列布局 */
  gap: 10px; /* 图片之间的间距 */
}

.image-grid img {
  width: 100%; /* 图片自适应宽度 */
  height: auto;
  border-radius: 5px; /* 图片圆角 */
}


.arrow {
  cursor: pointer;
  padding: 5px 10px;
  font-size: 20px;
  background: none;
  border: none;
}

.left-arrow {
  margin-right: 10px;
}

.right-arrow {
  margin-left: 10px;
}


.win-pay {
  color: #f00;
  font-weight: bold;
}

.td-rang p {
  line-height: 30px;
}

.itm-rangA1 p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
}

.td-rang {
  width: 70px;
}


.td-sort {
  position: relative;
}

.itm-sort {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

.star {
  color: red; /* 星星颜色为红色 */
  font-size: 14px; /* 星星的大小 */
  margin-right: 2px; /* 星星之间的间距 */
}

.td-rang, .bet-hhgg-main .td-rang {
  position: relative;
}

.bet-tb .td {
  text-align: center;
  vertical-align: middle;
}

.ico-dg {
  display: block;
  position: absolute;
  overflow: hidden;
  left: 0;
  height: 22px;
  background-position: 0 -180px;
}

.score {
  color: #f00;
  font-weight: bold;
}

.td-betbtn {
  padding: 0;
  vertical-align: middle; /* 垂直对齐内容 */
}

.betbtn-grid {
  display: grid;
  grid-template-rows: auto 1px auto; /* 两行和一条分隔线 */
  height: 100%; /* 使 td 高度适应内容 */
  border-collapse: collapse; /* 确保边框合并 */
}

.betbtn-row {
  display: flex;
  justify-content: space-around; /* 水平分布 */
  align-items: center; /* 垂直居中 */
  padding: 1px; /* 调整内边距 */
}

.divider {
  border-bottom: 1px solid #ddd; /* 分隔线 */
  margin: 0; /* 确保分隔线紧贴上下内容 */
}

.betbtn {
  margin: 0;
  padding: 1px;
  background-color: transparent; /* 去掉背景色 */
}

.betbtn span {
  display: inline-block;
}

/* 调整 channelWrap 的宽度和边距 */
.channelWrap {
  margin: 0 50px; /* 左右边距 50px */
  max-width: calc(100% - 100px); /* 最大宽度减去左右边距 */
  padding: 0; /* 去除内边距（如有的话） */
  box-sizing: border-box; /* 包含边框和内边距在内的宽度计算 */
}

/* 页面布局设置 */
html, body {
  height: 100%; /* 使页面的高度至少为视口高度 */
  margin: 0;
  padding: 0;
}

/* 确保页面主体部分至少占据全屏 */
.main {
  width: 100%;
  flex: 1; /* 让主内容区域占据剩余空间 */
  min-height: calc(100vh - 50px); /* 50px 为 Footer 的高度，根据实际高度调整 */
  padding-bottom: 50px; /* 给 Footer 留出空间 */
}

.football-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.football-table thead th {
  background-color: #f4f4f4;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  border: 1px solid #ddd;
}

.football-table tbody td {
  text-align: center;
  border: 1px solid #ddd;
}

.football-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.football-table tbody tr:hover {
  background-color: #eaeaea;
}

.leftBox {
  float: left;
  width: 95%;
  margin-right: 20px;
}

.rightBox {
  float: left;
  width: 20%;
}

.rightBox .title {
  margin-top: 10px;
  margin-bottom: 10px;
}

.cf::after {
  content: "";
  display: table;
  clear: both;
}

.main {
  flex: 1; /* 让主内容区域占据剩余空间 */
}

.box_center.cf {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 设置最小高度为视口高度 */
}

/* 确保页面内容至少占满整个页面高度 */
.content {
  flex: 1;
}

/* 日期选择器样式 */
.date-selector {
  background-color: #f9f9f9; /* 设置背景色 */
  padding: 10px;
  margin-bottom: 20px; /* 与下面表格间距 */
  border-radius: 10px; /* 圆角效果 */
}

.date-selector ul {
  margin-bottom: 20px;
  height: 50px;
  display: flex;
  justify-content: center;
  padding: 0;
  list-style-type: none;
}

.date-selector li {
  position: relative;
  padding: 8px 5px;
  margin: 0 10px;
  background-color: #fff;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.date-selector li.selected {
  background-color: #007bff;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.5); /* 点击时的阴影效果 */
}

.date-selector li:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* 鼠标悬停的阴影效果 */
  transform: translateY(-2px); /* 鼠标悬停时上升的视觉效果 */
}

.date-selector li:active {
  transform: translateY(0); /* 点击时还原位置 */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); /* 点击时的阴影效果 */
}

.date-wrapper {
  display: flex;
  flex-direction: column; /* 垂直排列日期文本和红色信息块 */
  justify-content: center;
  align-items: center;
  height: 100%;
}

.date-text {
  font-size: 16px;
  font-weight: bold;
  margin-top: 13px;
}

.hit-info {
  position: absolute;
  top: -5px; /* 右上角位置 */
  right: -5px;
  background-color: #ff4d4d;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 8px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


.friend_link {
  padding-bottom: 60px !important;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.dialog-title {
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}

.matchinfo {
  font-size: 20px;
  color: red;
}

.vs {
  font-size: 25px;
  padding: 5px 5px;
  color: #2d8cf0;
}
</style>